<template>
  <div class="api-document-container">
    <a-card class="header-card">
      <a-row :gutter="20">
        <a-col :span="16">
          <a-input-search
            v-model:value="searchText"
            placeholder="搜索API接口"
            style="width: 300px"
            @search="onSearch"
          />
        </a-col>
        <a-col :span="8" class="text-right">
          <a-button @click="generateDocument">
            <FileExcelOutlined />
            生成文档
          </a-button>
          <a-button type="primary" style="margin-left: 10px" @click="exportSwagger">
            <DownloadOutlined />
            导出Swagger
          </a-button>
        </a-col>
      </a-row>
    </a-card>

    <a-card class="content-card">
      <a-tabs v-model:activeKey="activeTab">
        <a-tab-pane key="1" tab="文档预览">
          <div class="document-preview">
            <h2>API接口文档</h2>
            <a-descriptions title="基本信息" :column="2">
              <a-descriptions-item label="文档标题">控制台API文档</a-descriptions-item>
              <a-descriptions-item label="版本">v1.0</a-descriptions-item>
              <a-descriptions-item label="基础URL">https://api.example.com</a-descriptions-item>
              <a-descriptions-item label="联系人">开发者团队</a-descriptions-item>
            </a-descriptions>

            <a-divider />

            <div v-for="(api, index) in apiList" :key="index" class="api-section">
              <h3>{{ api.name }}</h3>
              <p>{{ api.description }}</p>
              <a-descriptions :column="2">
                <a-descriptions-item label="请求URL">{{ api.path }}</a-descriptions-item>
                <a-descriptions-item label="请求方法">
                  <a-tag :color="getMethodColor(api.method)">{{ api.method }}</a-tag>
                </a-descriptions-item>
              </a-descriptions>

              <h4>请求参数</h4>
              <a-table
                :data-source="api.parameters"
                :columns="paramColumns"
                :pagination="false"
                size="small"
              />

              <h4>响应示例</h4>
              <pre class="response-example">{{ api.responseExample }}</pre>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="Swagger JSON">
          <pre class="swagger-json">{{ swaggerJson }}</pre>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
import { FileExcelOutlined, DownloadOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

export default {
  name: 'ApiDocument',
  components: {
    FileExcelOutlined,
    DownloadOutlined
  },
  data() {
    return {
      searchText: '',
      activeTab: '1',
      apiList: [
        {
          id: 1,
          name: '获取用户列表',
          path: '/api/users',
          method: 'GET',
          description: '获取系统中的用户列表信息',
          parameters: [
            { name: 'page', type: 'integer', required: false, description: '页码' },
            { name: 'size', type: 'integer', required: false, description: '每页数量' }
          ],
          responseExample: '{\n  "code": 200,\n  "message": "success",\n  "data": [\n    {\n      "id": 1,\n      "name": "张三",\n      "email": "zhangsan@example.com"\n    }\n  ]\n}'
        },
        {
          id: 2,
          name: '创建用户',
          path: '/api/users',
          method: 'POST',
          description: '创建一个新的用户',
          parameters: [
            { name: 'name', type: 'string', required: true, description: '用户姓名' },
            { name: 'email', type: 'string', required: true, description: '用户邮箱' }
          ],
          responseExample: '{\n  "code": 201,\n  "message": "created",\n  "data": {\n    "id": 1001,\n    "name": "张三",\n    "email": "zhangsan@example.com"\n  }\n}'
        }
      ],
      paramColumns: [
        { title: '参数名', dataIndex: 'name', key: 'name' },
        { title: '类型', dataIndex: 'type', key: 'type' },
        { title: '必填', dataIndex: 'required', key: 'required' },
        { title: '描述', dataIndex: 'description', key: 'description' }
      ],
      swaggerJson: `{
  "openapi": "3.0.0",
  "info": {
    "title": "控制台API文档",
    "version": "1.0.0"
  },
  "paths": {
    "/api/users": {
      "get": {
        "summary": "获取用户列表",
        "responses": {
          "200": {
            "description": "成功"
          }
        }
      },
      "post": {
        "summary": "创建用户",
        "requestBody": {
          "content": {
            "application/json": {
              "schema": {
                "type": "object",
                "properties": {
                  "name": {
                    "type": "string"
                  },
                  "email": {
                    "type": "string"
                  }
                }
              }
            }
          }
        },
        "responses": {
          "201": {
            "description": "创建成功"
          }
        }
      }
    }
  }
}`
    };
  },
  methods: {
    onSearch() {
      message.success('搜索功能已触发');
    },
    generateDocument() {
      message.success('文档生成成功');
    },
    exportSwagger() {
      message.success('Swagger文档导出成功');
    },
    getMethodColor(method) {
      const colorMap = {
        GET: 'blue',
        POST: 'green',
        PUT: 'orange',
        DELETE: 'red'
      };
      return colorMap[method] || 'default';
    }
  }
};
</script>

<style scoped>
.api-document-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.content-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.text-right {
  text-align: right;
}

.document-preview {
  padding: 20px;
}

.api-section {
  margin-bottom: 30px;
}

.response-example,
.swagger-json {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
}
</style>